<template>
  <!-- 订单物流组件 -->
  <div>
    <el-row>
      <el-col :span="12" v-loading="packageLoading" element-loading-text="加载中">
        <!-- 包裹信息 -->
        <div class="package-info-box pad-l-20">
          <div class="scroll-package width-per-100">
            <div v-for="(item,index) of packageList" 
              :key="index" 
              @click="changePackAge(item, index)"
              style="display: inline-block" 
              :class="index === 0 ? '': 'mar-l-20'">

              <span>包裹{{index + 1}}</span>
              <span class="flex b-line" v-if="packageInfo.orderPackageId === item.orderPackageId"></span>
            </div>
          </div>
          <div class="mar-t-20 flex" style="line-height: 25px;">
            <div class="flex-col">
              <span>包裹单号：{{packageInfo.orderPackageId}}</span>
              <span>关联订单号：{{orderNo}}</span>
              <span>关联出库单：{{packageInfo.stockOutNo}}</span>
              <span>仓库：{{packageInfo.warehouseName}}</span>
              <span v-if="packageInfo.packageLength !== undefined">包裹尺寸：{{packageInfo.packageLength}} x {{packageInfo.packageWidth}} x {{packageInfo.packageHeight}}</span>
              <span v-else>包裹尺寸：</span>        
              <span>包裹体积：{{packageInfo.packageSize}}</span>
              <span>包裹重量：{{packageInfo.packageWeight}}</span>
            </div>
            <div class="flex-col mar-l-20">
              <span>收货人姓名：{{packageInfo.consigneeName}}</span>
              <span>收货人电话：{{packageInfo.consigneePhone}}</span>
              <span>收货人地址：{{packageInfo.consigneeAddress}}</span>
              <span>快递公司：{{packageInfo.expressName}}</span>
              <span>运单号：{{packageInfo.trackingNo}}</span>
            </div>
          </div>
          <div class="mar-t-20">
            <el-table :data="goodsList" :height="260">
              <el-table-column label="商品">
                <template slot-scope="scope">
                  <div class="flex">
                    <img class="width-40 height-40" :src="scope.row.goodsImageUrl" alt="">
                    <span class="mar-l-10 line-2">{{ scope.row.goodsTitle }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="180px" label="规格" prop="skuDetail" align="left">
                <template slot-scope="scope">
                  <div class="font-blue">
                    {{ scope.row.skuDetail ? scope.row.skuDetail : '无' }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="数量" prop="goodsNum"></el-table-column>
            </el-table>
          </div>
          <!-- 列表分页 -->
          <div class="pagination">
            <el-pagination background 
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange"
              :current-page="searchListQuery.currentPage" 
              :page-sizes="[10, 20, 50, 100]" 
              :page-size="searchListQuery.size"
              layout="total, sizes, prev, pager, next, jumper" 
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <!-- 物流信息 -->
        <div v-loading="tracesLoading" element-loading-text="加载中" class="pad-r-20 scroll-layer-box flex">
          <el-timeline>
            <el-timeline-item type="primary" v-for="(activity, index) in traces" :key="index"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import {
    getOrderPackageByOrderNo,
    queryExpressByOrderPackageId,
    pageOrderPackageGoods
  } from '@/api/goods/order-package'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 订单编号
      orderNo: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      return {
        // 包裹单对象
        packageInfo: {
          orderPackageId: ''
        },
        // 查询条件
        searchListQuery: {
          orderPackageId: '',
          currentPage: 1,
          size: 10
        },
        // 包裹列表
        packageList: [],
        // 物流信息
        traces: [],
        // 商品列表
        goodsList: [],
        // 包裹loading
        packageLoading: false,
        // 物流loading
        tracesLoading: false,
        total: 0
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.traces = []
        this.packageLoading = true
        getOrderPackageByOrderNo(this.orderNo).then(response => {
          this.packageLoading = false
          if (response.isError) return
          if (!response.data) {
            this.$message.warning('无包裹信息')
            this.$emit('callback')
            return
          }
          this.packageList = response.data
          this.packageInfo = response.data[0]
          this.doSearchGoods()
          this.doSearchTrace()
        })
      },
      // 根据包裹单id查包裹单物流信息
      doSearchTrace() {
        this.traces = []
        this.tracesLoading = true
        queryExpressByOrderPackageId(this.packageInfo.orderPackageId).then(response => {
          this.tracesLoading = false
          if (response.isError || !response.data.Traces || response.data.Traces.length === 0) {
            this.$message.warning('未查到物流信息！')
            return
          }
          const Traces = response.data.Traces
          Traces.forEach(trace => {
            this.traces.push({
              'timestamp': trace.AcceptTime,
              'content': trace.AcceptStation
            })
          })
        })
      },
      // 根据包裹单id查包裹单商品
      doSearchGoods() {
        this.packageLoading = true
        this.searchListQuery.orderPackageId = this.packageInfo.orderPackageId
        pageOrderPackageGoods(this.searchListQuery).then(response => {
          this.packageLoading = false
          if (response.isError) return
          const data = response.data
          this.goodsList = data.records
          this.total = data.total
        })
      },
      // 点击切换查看包裹信息
      changePackAge(packageObj, index) {
        this.packageInfo = packageObj

        this.doSearchTrace()
        this.doSearchGoods()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.doSearchGoods()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.doSearchGoods()
      }
    }
  }
</script>

<style lang="less" scoped>
  .scroll-layer-box {
    /deep/ .el-timeline-item__wrapper {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
  }

  .package-info-box {
    overflow: hidden;
    .scroll-package {
      overflow-x: auto;
      white-space: nowrap;
      &>div {
        cursor: pointer;
        .b-line {
          height: 2px;
          background: #409EFF;
        }
      }
    }
  }
</style>
